<template>
  <el-dialog title="分销业绩详情" :close-on-click-modal="false" :visible.sync="visible" width="70%">
    <div class="mod-config">
      <div style="padding: 10px 40px;border: 1px solid #efefef;margin-bottom: 25px;">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-row :gutter="20">
              <el-col :span="8">昵称</el-col>
              <el-col :span="16">{{ dataObj.nickname }}</el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">uid</el-col>
              <el-col :span="16">{{ dataObj.userId }}</el-col>
            </el-row>
            <el-row :gutter="20" style="display: flex;align-items: center">
              <el-col :span="8">头像</el-col>
              <el-col :span="16">
                <img :src="dataObj.avatar" alt style="width: 40px;height: 40px;" />
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">手机号</el-col>
              <el-col :span="16">{{ dataObj.phone }}</el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">会员身份</el-col>
              <el-col :span="16" v-if="dataObj.grade==1">会员</el-col>
              <el-col :span="16" v-if="dataObj.grade==2">经理</el-col>
              <el-col :span="16" v-if="dataObj.grade==3">总监</el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="20">
              <el-col :span="8">管家昵称</el-col>
              <el-col :span="16">{{ dataObj.stewardshipNickName }}</el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">管家uid</el-col>
              <el-col :span="16">{{ dataObj.stewardshipUserId }}</el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">管家手机号</el-col>
              <el-col :span="16">{{ dataObj.stewardshipPhone }}</el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">管家微信号</el-col>
              <el-col :span="16">{{ dataObj.stewardshipWxNumber }}</el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">管家会员身份</el-col>
              <el-col :span="16" v-if="dataObj.stewardshipGrade==1">会员</el-col>
              <el-col :span="16" v-if="dataObj.stewardshipGrade==2">经理</el-col>
              <el-col :span="16" v-if="dataObj.stewardshipGrade==3">总监</el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <div class="cencontent">
        <div class="colcontent">
          <div class="title">今日店铺业绩</div>
          <div class="titlefu">销售总额：{{ shop.day.totalSaleVolume }}</div>
          <el-row>
            <el-col :span="12">益伴会员销售额：{{ shop.day.memberSaleVolume }}</el-col>
            <el-col :span="12">轻课课程销售额：{{ shop.day.courseSaleVolume }}</el-col>
          </el-row>
          <div class="titlefu">今日订单/笔：{{ shop.day.totalOrders }}</div>
          <el-row>
            <el-col :span="12">益伴会员订单/笔：{{ shop.day.memberOrders }}</el-col>
            <el-col :span="12">轻课课程订单/笔：{{ shop.day.courseOrders }}</el-col>
          </el-row>
          <div class="titlefu">今日收益：{{ shop.day.totalRevenue }}</div>
          <el-row>
            <el-col :span="12">益伴会员收益：{{ shop.day.memberRevenue }}</el-col>
            <el-col :span="12">轻课课程收益：{{ shop.day.courseRevenue }}</el-col>
          </el-row>
        </div>
        <div class="colcontent">
          <div class="title">本月店铺业绩</div>
          <div class="titlefu">销售总额：{{ shop.month.totalSaleVolume }}</div>
          <el-row>
            <el-col :span="12">益伴会员销售额：{{ shop.month.memberSaleVolume }}</el-col>
            <el-col :span="12">轻课课程销售额：{{ shop.month.courseSaleVolume }}</el-col>
          </el-row>
          <div class="titlefu">本月订单/笔：{{ shop.month.totalOrders }}</div>
          <el-row>
            <el-col :span="12">益伴会员订单/笔：{{ shop.month.memberOrders }}</el-col>
            <el-col :span="12">轻课课程订单/笔：{{ shop.month.courseOrders }}</el-col>
          </el-row>
          <div class="titlefu">本月收益：{{ shop.month.totalRevenue }}</div>
          <el-row>
            <el-col :span="12">益伴会员收益：{{ shop.month.memberRevenue }}</el-col>
            <el-col :span="12">轻课课程收益：{{ shop.month.courseRevenue }}</el-col>
          </el-row>
        </div>
        <div class="colcontent">
          <div class="title">总店铺业绩</div>
          <div class="titlefu">销售总额：{{ shop.total.totalSaleVolume }}</div>
          <el-row>
            <el-col :span="12">益伴会员销售额：{{ shop.total.memberSaleVolume }}</el-col>
            <el-col :span="12">轻课课程销售额：{{ shop.total.courseSaleVolume }}</el-col>
          </el-row>
          <div class="titlefu">总订单/笔：{{ shop.total.totalOrders }}</div>
          <el-row>
            <el-col :span="12">益伴会员订单/笔：{{ shop.total.memberOrders }}</el-col>
            <el-col :span="12">轻课课程订单/笔：{{ shop.total.courseOrders }}</el-col>
          </el-row>
          <div class="titlefu">总收益：{{ shop.total.totalRevenue }}</div>
          <el-row>
            <el-col :span="12">益伴会员收益：{{ shop.total.memberRevenue }}</el-col>
            <el-col :span="12">轻课课程收益：{{ shop.total.courseRevenue }}</el-col>
          </el-row>
        </div>
        <div class="colcontent">
          <div class="title">今日管理业绩</div>
          <div class="titlefu">销售总额：{{ manager.day.totalSaleVolume }}</div>
          <el-row>
            <el-col :span="12">益伴会员销售额：{{ manager.day.memberSaleVolume }}</el-col>
            <el-col :span="12">轻课课程销售额：{{ manager.day.courseSaleVolume }}</el-col>
          </el-row>
          <div class="titlefu">今日订单/笔：{{ manager.day.totalOrders }}</div>
          <el-row>
            <el-col :span="12">益伴会员订单/笔：{{ manager.day.memberOrders }}</el-col>
            <el-col :span="12">轻课课程订单/笔：{{ manager.day.courseOrders }}</el-col>
          </el-row>
          <div class="titlefu">今日收益：{{ manager.day.totalRevenue }}</div>
          <el-row>
            <el-col :span="12">益伴会员收益：{{ manager.day.memberRevenue }}</el-col>
            <el-col :span="12">轻课课程收益：{{ manager.day.courseRevenue }}</el-col>
          </el-row>
        </div>
        <div class="colcontent">
          <div class="title">本月管理业绩</div>
          <div class="titlefu">销售总额：{{ manager.month.totalSaleVolume }}</div>
          <el-row>
            <el-col :span="12">益伴会员销售额：{{ manager.month.memberSaleVolume }}</el-col>
            <el-col :span="12">轻课课程销售额：{{ manager.month.courseSaleVolume }}</el-col>
          </el-row>
          <div class="titlefu">本月订单/笔：{{ manager.month.totalOrders }}</div>
          <el-row>
            <el-col :span="12">益伴会员订单/笔：{{ manager.month.memberOrders }}</el-col>
            <el-col :span="12">轻课课程订单/笔：{{ manager.month.courseOrders }}</el-col>
          </el-row>
          <div class="titlefu">本月收益：{{ manager.month.totalRevenue }}</div>
          <el-row>
            <el-col :span="12">益伴会员收益：{{ manager.month.memberRevenue }}</el-col>
            <el-col :span="12">轻课课程收益：{{ manager.month.courseRevenue }}</el-col>
          </el-row>
        </div>
        <div class="colcontent">
          <div class="title">总管理业绩</div>
          <div class="titlefu">销售总额：{{ manager.total.totalSaleVolume }}</div>
          <el-row>
            <el-col :span="12">益伴会员销售额：{{ manager.total.memberSaleVolume }}</el-col>
            <el-col :span="12">轻课课程销售额：{{ manager.total.courseSaleVolume }}</el-col>
          </el-row>
          <div class="titlefu">总订单/笔：{{ manager.total.totalOrders }}</div>
          <el-row>
            <el-col :span="12">益伴会员订单/笔：{{ manager.total.memberOrders }}</el-col>
            <el-col :span="12">轻课课程订单/笔：{{ manager.total.courseOrders }}</el-col>
          </el-row>
          <div class="titlefu">总收益：{{ manager.total.totalRevenue }}</div>
          <el-row>
            <el-col :span="12">益伴会员收益：{{ manager.total.memberRevenue }}</el-col>
            <el-col :span="12">轻课课程收益：{{ manager.total.courseRevenue }}</el-col>
          </el-row>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="visible = false">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      shop: {
        day: {},
        month: {},
        total: {}
      },
      manager: {
        day: {},
        month: {},
        total: {}
      },
      dataObj: {}
    };
  },
  methods: {
    initData(id) {
      this.visible = true;
      // 获取用户详情
      this.$http({
        url: this.$http.adornUrl(`/sale/saleRelation/info/${id}`),
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataObj = data.RelationInfoVo || {};
        } else {
          this.$message.error(data.msg)
        }
      });
      // 调c端接口获取分销详情
      const obj = {
        userId: id
      };
      let basetUrl = 'https://yiban-api-test.qingclass.com/yiban-app/api/sale/v1.0.0/getUserSaleInfo'
      if(process.env.NODE_MYSELF) {
        basetUrl = 'https://yiban-c-api.ivykid.com/yiban-app/api/sale/v1.0.0/getUserSaleInfo'
      }
      this.$http({
        url: basetUrl,
        method: "get",
        params: this.$http.adornParams(obj)
      }).then(({ data }) => {
        this.shop = data.data.shop;
        this.manager = data.data.manager;
      });
    }
  }
};
</script>
<style scoped>
.el-row {
  font-size: 16px;
  margin: 15px 0;
}
.cencontent {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.colcontent {
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  background: #f2f2f2;
  width: 31.8%;
  margin-bottom: 25px;
  padding: 15px 15px 5px 15px;
}
.title {
  font-size: 17px;
  font-weight: 600;
}
.titlefu {
  font-size: 14px;
  margin-top: 18px;
}
.cencontent .el-row {
  font-size: 12px;
  margin: 10px 0;
}
</style>
